<template>
	<view class="template-integral tn-safe-area-inset-bottom ">
		<view class="bg-fff">
			<tn-tabs :list="scrollList" :current="current" @change="tabChange" activeColor="#000" :bold="true"
				:fontSize="32"></tn-tabs>
		</view>

		<view class="">
			<view class="flex f-between f-center ma-20 bg-fff pa-30 b-r-15"
				v-for="(item,index) in integral.slice(0,3)" :key="index">
				<view class="justify-content-item">
					<view class=" ">
						{{item.name}}
					</view>
					<view class="c-aaa tn-text-sm ma-t-20"><text class="tn-icon-time"></text>{{item.time}}</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-padding-top">
					<view :class="'tn-color-' + item.color + ';'"> {{item.integral}} </view>
				</view>
			
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				scrollList: [{
						name: '全部',
					},
					{
						name: '醇香麦芽精酿啤酒‌'
					},
					{
						name: '‌‌冰萃冷泡果味茶‌‌'
					}
				],
				integral: [{
					name: '醇香麦芽精酿啤酒‌500ML，购买2箱成功',
					time: '2022-05-20 22:45:29',
					color: 'blue--dark',
					integral: '+10'
				}, {
					name: '‌沁爽青柠气泡水‌，提现（260积分）已提交。',
					time: '2022-05-18 20:20:50',
					color: 'purplered',
					integral: '-260'
				}, {
					name: '‌冰萃冷泡果味茶‌，购买7箱成功',
					time: '2022-05-18 18:11:19',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌蜜桃乌龙风味汽水‌，购买32箱成功',
					time: '2022-05-17 13:42:42',
					color: 'blue--dark',
					integral: '+100'
				}, {
					name: '‌古法酿造米酒‌，购买11箱成功',
					time: '2022-05-16 12:14:43',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌活力维C电解质水‌，购买3箱成功',
					time: '2022-05-15 10:21:08',
					color: 'blue--dark',
					integral: '+50'
				}, {
					name: '‌焦糖拿铁即饮咖啡‌，购买XXXX箱成功',
					time: '2022-05-14 08:56:32',
					color: 'blue--dark',
					integral: '+50'
				}],
			}
		},
		methods: {
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	  

	/* 顶部背景图 end */

	/* 页面 start*/
	.integral-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.integral-wrap {
		position: relative;
		z-index: 1;
		margin-top: -420rpx;
	}

	/* 页面 end*/

	/* 翘边阴影*/
	.shadow-warp {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.01);
	}

	.shadow-warp:before,
	.shadow-warp:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
		transform: rotate(-3deg);
		z-index: -1;
	}

	.shadow-warp:after {
		right: 20rpx;
		left: auto;
		transform: rotate(3deg);
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 50rpx;
				height: 50rpx;
				font-size: 30rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		z-index: 0;
		height: 200rpx;
		left: 0;
		right: 0;
		top: 290rpx;
		bottom: auto;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}

	/* 波浪*/


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
</style>